<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
</style>
<template>
  <div class="sendcar">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      录入报废单
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <div class="cellgroup">
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">库房</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" @change='getSpec()' name="entity.srguid" v-model="srguid">
                <option  v-for="(item, index) in rooms" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">报废类型</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" @change='getSpec()'   name="entity.type" v-model="type">
                <option value="1">成品</option>
                <option value="2">次品</option>
                <option value="3">原料</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">所属公司</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select orgguid" @change='getSpec()' name="entity.orgguid" id="orgguid" v-model="orgguid">
                <option value="">请选择公司</option>
                <option v-for="(item, index) in ogs" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">报废原因</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="entity.scraptype" >
                <option value="">请选择报废原因</option>
                <option value="1">腐烂报废</option>
                <option value="2">库损</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">报废说明</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="entity.remark" placeholder="请输入报废说明" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="oitem">
          <div class="weui-cells__title">货品明细1
            <p id="acts" style="float: right;color: #1aad19;">
              <span id="addItem" style="padding-right: 5px;">添加</span>
            </p>
          </div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select house" name="items[0].shguid" v-model="shguid0">
                <option value="">请选择库间</option>
                <option  v-for="(item, index) in houses" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select product" @change='getSpec(0)' name="items[0].productid">
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products0" :key="item.productid" :value="item.productid">{{item.productname}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select" v-if="type == 1">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="items[0].specguid">
                <option  v-for="(item, index) in spes0" :key="item.spguid" :value="item.spguid">{{item.specName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" name="items[0].weight">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">金额</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="number" name="items[0].amount">-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细2</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select house" name="items[1].shguid" disabled="true" v-model="shguid1">
                <option value="">请选择库间</option>
                <option  v-for="(item, index) in houses" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select product" @change='getSpec(1)' name="items[1].productid" disabled="true">
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products1" :key="item.guid" :value="item.productid">{{item.product}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select" v-if="type == 1">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="items[1].specguid" disabled="true">
                <option  v-for="(item, index) in spes1" :key="item.spguid" :value="item.spguid">{{item.specName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" name="items[1].weight" disabled="true">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">金额</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="number" name="items[1].amount" disabled="true">-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细3</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select house" name="items[2].shguid" disabled="true" v-model="shguid2">
                <option value="">请选择库间</option>
                <option  v-for="(item, index) in houses" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select product" @change='getSpec(2)' name="items[2].productid" disabled="true">
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products2" :key="item.guid" :value="item.productid">{{item.product}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select" v-if="type == 1">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="items[2].specguid" disabled="true">
                <option  v-for="(item, index) in spes2" :key="item.spguid" :value="item.spguid">{{item.specName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" name="items[2].weight" disabled="true">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">金额</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="number" name="items[2].amount" disabled="true">-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细4</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select house" name="items[3].shguid" disabled="true" v-model="shguid3">
                <option value="">请选择库间</option>
                <option  v-for="(item, index) in houses" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select product" @change='getSpec(3)' name="items[3].productid" disabled="true">
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products3" :key="item.guid" :value="item.productid">{{item.product}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select" v-if="type == 1">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="items[3].specguid" disabled="true">
                <option  v-for="(item, index) in spes3" :key="item.spguid" :value="item.spguid">{{item.specName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" name="items[3].weight" disabled="true">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">金额</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="number" name="items[3].amount" disabled="true">-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细5</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select house" name="items[4].shguid" disabled="true" v-model="shguid4">
                <option value="">请选择库间</option>
                <option  v-for="(item, index) in houses" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select product" @change='getSpec(4)' name="items[4].productid" disabled="true">
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products4" :key="item.guid" :value="item.productid">{{item.product}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select" v-if="type == 1">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select"  name="items[4].specguid" disabled="true">
                <option  v-for="(item, index) in spes4" :key="item.spguid" :value="item.spguid">{{item.specName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" name="items[4].weight" disabled="true">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">金额</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="number" name="items[4].amount" disabled="true">-->
<!--            </div>-->
<!--          </div>-->
        </div>

        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AddScrap',
    data () {
      return {
        openid: localStorage.openid,
        rooms: [],
        houses: [],
        shguid0: '',
        shguid1: '',
        shguid2: '',
        shguid3: '',
        shguid4: '',
        products0: [],
        products1: [],
        products2: [],
        products3: [],
        products4: [],
        ogs: {},
        spes0: {},
        spes1: {},
        spes2: {},
        spes3: {},
        spes4: {},
        type: 1,
        srguid: '',
        orgguid: '',
        orgname: ''
      }
    },
    created() {
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
      })
    },
    mounted () {
      let that = this;
      //获取回显数据
      this.getBaseInfo();
      //获取备选产品
      $('.house').change(function () {
        //if ($(this).val() == '') return;
        let index = $(this).index();
        that.getProduct(index);
      })
      $('#orgguid').change(function () {
        that.orgname = $(this).find('option:selected').text();
        for (let i=0; i<$('.product').not(':hidden').length; i++) {
          if (that['shguid' + i] == '') return;
          that.getProduct(i);
        }
      })
      //添加明细item
      $('form').on('click', '#addItem', function () {
        $('.oitem:hidden').eq(0).find('input').attr("disabled",false);
        $('.oitem:hidden').eq(0).find('textarea').attr("disabled",false);
        $('.oitem:hidden').eq(0).find('select').attr("disabled",false);
        $('.oitem:hidden').eq(0).show();
        updateActBtns();
      })
      //删除明细
      $('form').on('click', '#delItem', function () {
        var elm = $(this).parents('.oitem');
        $.confirm("确定要删除该货品明细吗？", function () {
          elm.find('input').val('');
          elm.find('textarea').val('');
          elm.hide();
          $('.oitem:hidden').eq(0).find('input').attr("disabled",true);
          $('.oitem:hidden').eq(0).find('textarea').attr("disabled",true);
          $('.oitem:hidden').eq(0).find('select').attr("disabled",true);
          updateActBtns();
        })
      })
      //调整添加、删除按钮位置
      function updateActBtns() {
        $('#acts').remove();
        var actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="addItem" style="padding-right: 5px;">添加</span><span>|</span><span id="delItem" style="padding-left: 5px;">删除</span></p>';

        if ($('.oitem:visible').length == 5) {
          actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="delItem" style="padding-left: 5px;">删除</span></p>';
        } else if ($('.oitem:visible').length == 1) {
          var actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="addItem" style="padding-right: 5px;">添加</span></p>';
        }
        $('.oitem:visible:last').find('.weui-cells__title').append(actHtml);
      }
    },
    watch: {
      'srguid': function (val) {
        this.srguid = val;
        this.getHouse();
      },
      'type': function (val) {
        this.type = val;
        this.getHouse();
      },
    },
    methods: {
      getBaseInfo: function() {
        this.axios({
          method: 'get',
          url: '/produce/Scrapapply!getBaseInfo.action?openid=' + this.openid ,
          params: {}
        }).then((response) => {
          if (response.data.msg == 'success') {
            let data = response.data;
            this.rooms = data.rooms;
            this.srguid = data.rooms[0].guid;
            this.ogs = data.ogs;
            if (data.ogs.length > 0) {
              this.orgguid = data.ogs[0].guid;
            }
            //this.spes = data.spes;
          } else if (response.data.msg == 'outlogin') {
            this.toastError("请重新登录");
          } else {
            this.toastError("系统错误");
          }

        })
      },
      getHouse: function() {
        if (this.srguid == undefined || this.type == undefined) {
          return;
        }
        this.axios({
          method: 'get',
          url: '/produce/StoreHouse!getHouses.action',
          params: {type: this.type, srguid: this.srguid}
        }).then((response) => {
          if (response.data.msg == 'success') {
            let data = response.data;
            this.houses = data.houses;
          } else {
            this.toastError("系统错误");
          }

        })
      },
      getProduct: function(index){
          console.log("222" , index);
        if (this['shguid' + index] == '') {
          this['products' + index] = [];
        } else {
          this.axios({
            method: 'get',
            url: '/produce/Scrapapply!getProducts.action?openid=' + this.openid,
            params: {shguid: this['shguid' + index], orgguid: this.orgguid}
          }).then(response => {
            if(response.data.msg == "success"){
              this['products' + index] = response.data.infos;


            } else {
              this.toastError('系统错误!');
            }
          });
        }
      },
      send: function() {
        if (!this.checkEmy('orgguid')) {
          this.toastText('公司有误！');
          return false;
        }
        if (!this.checkEmy('product')) {
          this.toastText('产品有误！');
          return false;
        }
        if (!this.checkEmy('weight')) {
          this.toastText('重量有误！');
          return false;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");

        this.axios({
          method: 'post',
          url: '/produce/Scrapapply!save.action?openid=' + this.openid,
          //params: $("#formid").serialize()
          params: this.serialize2Obj($("#formid").serializeArray())
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");

            if(response.data.msg == "success"){
            this.toastText('操作成功!');
            this.$router.push({name: 'ScrapList'});
          }else if (response.data.msg == 'outlogin'){
            this.toastError('请重新登录!');
          }else if (response.data.msg == 'error'){
            this.toastError('系统错误!');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          this.toastError('系统错误');
        });

      } ,
        /**
         * buh174 创建报废单，规格没有按照库存来查询获取
         * 20200312
         * liukx
         * @param param
         */
        getSpec: function(index) {
           var  paramData = {
                orgid:this.orgguid,
                strmid:this.srguid,
                picktype:this.type,
                productid:$("select[name='items["+ index+"].productid']").val(),
            }
            console.log(paramData ,index);
            if((paramData.orgid == '' || paramData.strmid == '' ||paramData.picktype == '') && index != undefined ){
                this.toastText('请先选择库房，所属公司，报废类型!');
                return;
            }
            if((paramData.orgid == '' || paramData.strmid == '' ||paramData.picktype == ''||paramData.productid == undefined)){
                 return;
            }
            if(paramData.picktype != 1){
               return;
            }
            if(paramData.picktype != ''){
                paramData.picktype = this.changePicktype(paramData.picktype);
            }


            this.axios({
                method: 'get',
                url: '/sales/Whoutform!getSpesByWinfo.action',
                params: paramData
            }).then((response) => {
                if (response.data.msg != 'error') {
                    let data = response.data;
                    this['spes' + index] = data.spes;
                } else {
                    this.toastError("系统错误");
                }

            })
        }, changePicktype: function(type) {
            let name = '';
            switch (type) {
                case 1:
                    name = 2;
                    break;
                case 2:
                    name = 3;
                    break;
                case 3:
                    name = 1;
                    break;
            }
            return name;
        },

    }
  }


</script>
